<template>
  <a-table :columns="columns" :data-source="tableList" :pagination="page"
  @change="handleChange">
    <div slot="operation" slot-scope="text, record">
        <a-button @click="editHandle(record)">编辑</a-button>
        <a-button @click="removeHandle(record)">删除</a-button>
    </div>
    <!-- <a-pagination
      show-size-changer
      :default-current="page.current"
      :total="page.total"
      :page-size.sync="page.pageSize"
      @showSizeChange="onShowSizeChange"
    /> -->
  </a-table>

</template>
<script>
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
    ellipsis: true,
  },
  {
    title: '描述',
    dataIndex: 'desc',
    key: 'desc',
  },
  {
    title: '类目',
    dataIndex: 'categoryName',
    key: 'category',
  },
  {
    title: '预售价格',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '折扣价格',
    dataIndex: 'price_off',
    key: 'price_off',
  },
  {
    title: '标签',
    dataIndex: 'tags',
    key: 'tags',
  },
  {
    title: '限制购买数量',
    dataIndex: 'inventory',
    key: 'inventory',
  },
  {
    title: '上架状态',
    dataIndex: 'status',
    key: 'status',
    customRender(text, record) {
      return record.status === 1 ? '上架' : '下架';
    },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' },
    width: '200px',
    align: 'center',
  },
];

// const data = [
//   {
//     key: '1',
//     name: 'John Brown',
//     age: 32,
//     address: 'New York No. 1 Lake Park',
//     tags: ['nice', 'developer'],
//   },
//   {
//     key: '2',
//     name: 'Jim Green',
//     age: 42,
//     address: 'London No. 1 Lake Park',
//     tags: ['loser'],
//   },
//   {
//     key: '3',
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//   },
// ];

export default {
  data() {
    return {
      columns,
    };
  },
  props: ['tableData', 'page'],
  computed: {
    tableList() {
      return this.tableData.map((i) => ({
        ...i,
        key: i.id,
      }));
    },
  },
  methods: {
    handleChange(pagination) {
      this.$emit('changePage', pagination);
    },
    editHandle(record) {
      this.$emit('editProduct', record);
    },
    removeHandle(record) {
      this.$emit('removeProduct', record);
    },
  },
};
</script>
